<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 10px solid black;
            padding: 5px;
        }

        .box_two {
            width: 100px;
            height: 100px;
            border: 10px solid black;
            padding: 20px;
            /* background: pink; */
        }
        .box_two_node {
            width: 50px;
            height: 50px;
            background: orange;
        }

        .box_three {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            padding: 30px;
        }
        .box_three>.box_three_node1 {
            width: 100px;
            height: 100px;
            background: green;;
        }
    </style>
</head>

<body>
    <!-- 
    padding是内边距，控制元素内容与上下左右边的距离。这样会让元素变大（元素的大小=内边距+本来的宽度）。
        padding 提供4个值，分别上、右、下、左 （从左边开始顺时针）
        padding 提供1个值，上下左右都生效
        padding 提供2个值，分别代表“上下”， “左右”
        padding 提供3个值，分别代表“上” “左右”， “下”

        可用 padding-top 等分别设置


    -->

    <div class="box">box</div>
    <div class="box_two">
        <div class="box_two_node"></div>
    </div>
    <div class="box_three">
        <div class="box_three_node1"></div>
    </div>

</body>

</html>